<template>
  <div class="about">
    <h1>This is an about page11</h1>
    <button @click="increment">add</button>
    <p>count{{ count }}</p>
    <p>doubleCount{{ doubleCount }}</p>
    <p>option {{ option.name }} -{{ option.sex }}</p>
    <p>--------------------</p>
    <p>num {{ num }} age: {{ age }}</p>

    <p style="height: 20px;border-bottom: 1px solid red;" v-for="item in list">{{ item }}</p>
    <Com1 ref="com1Ref" :msg="name" @testEmit="func"></Com1>
    <Com2></Com2>
  </div>
</template>

<script setup>
import {ref, reactive, toRefs, nextTick, onMounted, toRef, watchEffect,  watch} from 'vue'
import { storeToRefs } from 'pinia';
import {useCounterStore} from '@/stores/counter';
import Com1 from '@/components/Com1.vue';
import Com2 from '@/components/Com2.vue';

defineOptions({name: 'about'})

const counterStore = useCounterStore()
const {count, doubleCount} = storeToRefs(counterStore)
const {increment} = counterStore


const com1Ref = ref()
onMounted(() => {
  
  console.log(com1Ref.value.testFunc());
})

const func = (option) => {
  console.log(option,  '-----option---');
  
}

const num = ref(7)
const name = ref('rose')
const obj = reactive({
  count: 9,
  age: 20
})
const {age} = toRefs(obj)
console.log(age);

const option = ref({
  name: 'rose',
  sex: 'boy'
})

let {sex} = option.value
console.log(sex, '-----88');


const list = reactive([1,2,3])
// list.length = 1 // ❌ 不会触发更新
// list.splice(1)  // ✅ 正确姿势





setTimeout(() => {
  age.value = 32
  num.value = 8
  
  option.value.name = 'jack'

  
}, 2000);

setTimeout(() => {
  // list.splice(1)
  list.length = 1

  
}, 4000);

watchEffect(() => {
  console.log(`age is now ${age.value} -----num ${num.value}`);
  // 在这里执行你想要的任何操作
});

watch(num,  (newval, oldval) => {
  console.log('num is', newval, oldval);
  
}, {
  immediate: true,
})





</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
